<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" th:href="@{/static/layui/css/layui.css}">
  <script type="text/javascript" th:src="@{/static/jquery-2.1.4.js}"></script>
  <script type="text/javascript" th:src="@{/static/layui/layui.js}"></script>
  <script type="text/javascript" th:src="@{/static/mylayer.js}"></script>
</head>
<body>
<!--表格上侧是搜索框-->
<form class="layui-form">
<!--  员工ID:-->
<!--  <div class="layui-inline" style="width: 150px;">-->
<!--    <input type="text" name="employeeId" value="" class="layui-input" lay-affix="clear">-->
<!--  </div>-->
  考勤状态:
  <div class="layui-inline" style="width: 150px;">
    <select name="status">
      <option value="">--请选择--</option>
      <option value="on_time">正常</option>
      <option value="late">迟到</option>
      <option value="early_leave">早退</option>
      <option value="absent">缺勤</option>
    </select>
  </div>
<!--  邮箱:-->
<!--  <div class="layui-inline">-->
<!--    <input type="text" name="email" value="" class="layui-input" lay-affix="clear">-->
<!--  </div>-->
  考勤开始：
  <div class="layui-inline" style="width: 150px;">
    <input type="text" class="layui-input" name="beginCreateTime" id="beginCreateTime" placeholder="yyyy-MM-dd">
  </div>
  考勤结束：
  <div class="layui-inline" style="width: 150px;">
    <input type="text" class="layui-input" name="endCreateTime" id="endCreateTime" placeholder="yyyy-MM-dd">
  </div>
  <div class="layui-inline">
    <button class="layui-btn" lay-submit lay-filter="submitSearch">搜索</button>
    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
  </div>
</form>

<!--要渲染的table表格-->
<table class="layui-hide" id="test" lay-filter="test"></table>

<!--右侧单元格工具条-->
<!--<script type="text/html" id="barDemo">-->
<!--  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>-->
<!--  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>-->
<!--</script>-->

<!--表格上侧工具条：添加、批量删除-->
<script type="text/html" id="toolbarDemo">
  <div class="layui-btn-container">
    <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
<!--    <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="deleteAll">批量删除</button>-->
  </div>
</script>

<script type="text/html" id="statusDateTemplet">
  {{#     if(d.status == 'on_time') {             }}
  正常
  {{#     } else if(d.status == 'late') {     }}
  迟到
  {{#     } else if(d.status == 'early_leave') {     }}
  早退
  {{#     } else if(d.status == 'absent') {     }}
  缺勤
  {{#     }                            }}
</script>

<script type="text/html" id="attendanceDateTemplet">
  {{ layui.util.toDateString(d.attendanceDate, 'yyyy-MM-dd HH:mm:ss') || 'N/A' }}
</script>

<script>
  layui.use(['table','form', 'laydate', 'upload'], function(){
    var table = layui.table;
    var form = layui.form;
    var laydate = layui.laydate;
    var upload = layui.upload;


    laydate.render({
      elem: '#beginCreateTime',
      type:'datetime'
    });
    laydate.render({
      elem: '#endCreateTime',
      type:'datetime'
    });
    //https://layui.dev/2.7/static/json/table/attendance.json?page=1&limit=10
    // http://localhost:8080/attendance/list?page=1&limit=10&name=zhangsan&email=shsdh
    table.render({
      elem: '#test'
      ,toolbar: '#toolbarDemo'
      ,url:'/attendance/queryByAllLimit'
      ,cols: [
        [
          {type:'checkbox', fixed: 'left'}
          ,{field:'attendanceId', title: 'ID',width:80, sort: true, fixed: 'left',hide:true}
          ,{field:'employeeId', title: '员工ID',width:80}
          ,{field: 'employeeName',title:'员工名字'}
          ,{field:'attendanceDate', title: '考勤日期',templet: '#attendanceDateTemplet'}
          ,{field: 'status',title: '考勤状态',templet: '#statusDateTemplet'}
          ,{fixed: 'right', title:'操作', toolbar: '#barDemo'}
        ]
      ]
      ,page: true
      ,id: 'tableId'
      // ,done: function(res, curr, count){
      //   console.log("表格渲染完成，以下是表格中渲染的数据：");
      //   var tableData = [];
      //   // 获取表格的 DOM 对象
      //   var tableDom = $(this.elem);
      //   // 找到表格的 tbody 元素
      //   var tbody = tableDom.find('tbody');
      //   // 遍历 tbody 中的每一行
      //   tbody.children().each(function(index, tr) {
      //     var rowData = {};
      //     // 遍历当前行的每一个单元格
      //     $(tr).children().each(function(i, td) {
      //       var field = $(this).data('field');
      //       var value = $(this).text();
      //       if (field) {
      //         rowData[field] = value;
      //       }
      //     });
      //     tableData.push(rowData);
      //   });
      //   console.log(tableData);
      // }
    });

    // 搜索提交
    form.on('submit(submitSearch)', function(data){
      var field = data.field; // 获得表单字段
      // 执行搜索重载
      table.reload('tableId', {
        page: {
          curr: 1 // 重新从第 1 页开始
        },
        where: field // 搜索的字段
        // http://localhost:8080/attendance?method=selectByPage&page=1&limit=10&name=zhangsan&credit=12
      });

      return false; // 阻止默认 form 跳转
    });

    // 工具栏事件
    table.on('toolbar(test)', function(obj){
      var id = obj.config.id;
      var checkStatus = table.checkStatus(id);
      var othis = lay(this);
      switch(obj.event){
        case 'add':
          layer.open({
            type: 2,
            area: ['90%', '90%'],
            content: '/attendance/toAttendanceAdd'
          });
          break;
        case 'deleteAll':
          var data = checkStatus.data;
          console.log(data)
          //[{'id':1001,'name':'zhansgan'},{'id':1002,'name':'lisi'}]
          var array = new Array();
          for (var i = 0; i < data.length; i++) {
            //data[i] : {'id':1001,'name':'zhansgan'}
            array.push(data[i].attendanceId);
          }
          // [1001, 1002]
          var ids = array.join(',');// '1001,1002'
                console.log(ids);
          layer.confirm('真的删除行么', function(index){
            $.post(
                    '/attendance/deleteAll', //后台地址
                    {'ids': ids},    //传递数据
                    function (result) { //回调函数
                      console.log(result);
                      if (result.code == 0) {
                        mylayer.okMsg(result.msg);
                        //刷新表格，查询最新的数据
                        table.reload('tableId');
                      } else {
                        mylayer.errorMsg(result.msg);
                      }
                    },
                    'json'              //服务器返回数据是json格式
            );
          });
          break;
        case 'LAYTABLE_TIPS':
          layer.alert('Table for layui-v'+ layui.v);
          break;
      };
    });

    //触发单元格工具事件
    table.on('tool(test)', function(obj){ // 双击 toolDouble
      var data = obj.data;
      console.log(obj)
      if(obj.event === 'del'){
        layer.confirm('真的删除行么', function(index){
          //发送ajax请求
          $.post(
                  '/attendance/delete', //后台地址
                  {'attendanceId': data.attendanceId},    //传递数据
                  function (result) { //回调函数
                    //{}  [{},{}]
                    //{code: 0, msg: '删除成功', data: null, ok: true}
                    console.log(result);
                    if (result.code == 0) {
                      mylayer.okMsg(result.msg);
                      //刷新表格，查询最新的数据
                      table.reload('tableId');
                    } else {
                      mylayer.errorMsg(result.msg);
                    }
                  },
                  'json'              //服务器返回数据是json格式
          );

        });
      } else if(obj.event === 'edit'){
        layer.open({
          title: '编辑',
          type: 2,
          area: ['90%', '90%'],
          content: '/attendance/toAttendanceUpdate?attendanceId=' + data.attendanceId
        });
      }
    });
  });
</script>

</body>
</html>